import React, { Component } from 'react'
import styles from "./FoodList.module.scss"
import { connect } from "react-redux"
import axios from "../../../utils/myaxios"
import Lazy from "../../../utils/imgLazyLoad"
/*
菜品列表组件
用于展示热销、优惠、招牌、闭店、加料等信息
*/

class FoodList extends Component {

    componentDidMount(){  
        axios.post("/user/getProductByShopID",{
            shopID:this.props.shopID
        }).then((res)=>{
            if(res.code === 200){  
                const nowData = res.results.map((v,i) => {
                    return {
                        id: v.productID,
                        name: v.productName,
                        price: v.price,
                        num:  0,
                        kind1: "",
                        kind2:"",
                        kind3:"",
                        sortOID:v.sortOID,
                        picture:v.picture

                    }
                })
                this.props.sendData(nowData)
            }
        }).catch((err)=>{
            console.log(err);        
        })
    } 

    render() {    
    
        return (
            <div className={styles.listBox}>
                {/* 列表标题 */}
                <div className={styles.listTit}>
                    <strong>热销</strong>
                    <span>大家都喜欢吃，才叫真好吃</span>
                </div>
                {/* 栏目内容 */}
                <div className={styles.content}>
                    {(this.props.getData.filter((v)=>v.sortOID===parseInt(this.props.sortOID))).map((v,i) =>
                        <div key={v.id} className={styles.listItem} >
                            {/* 图片 */}
                            <div className={styles.itemImg}>
                                <Lazy src={"http://175.24.122.212:9090/" + v.picture} alt="图片" />
                            </div>
                            {/* 信息 */}
                            <div className={styles.itemMsg}>
                                <div className={styles.itemName}>{v.name}</div>
                                <div className={styles.itemDes}>{v.des}</div>
                                <div className={styles.itemPrice}>
                                    <div className={styles.priceLeft}>
                                        ￥<span>{v.price}</span>起
                                    </div>
                                    <div onClick={()=>{this.props.selectNow(v.id,this.props.getData)}} 
                                         className={`${styles.priceRight} ${this.props.getData.some(()=>v.num!==0) ? styles.noShow : ""}`}>
                                         选规格</div>
                                     {/* 有了数量后再显示 */}
                                    <div className={this.props.getData.some(()=>v.num>0) ? styles.show : styles.noShow}>
                                        <span onClick={()=>{this.props.changeFoodNum(-1,v.id,v.num,this.props.cartID)}}>-</span>
                                        <span>{(this.props.getData.filter((item)=>item.id===v.id))[0].num}</span>
                                        <span onClick={()=>{this.props.changeFoodNum(1,v.id,v.num,this.props.cartID)}}>+</span>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>)}
                </div>
            </div>
        )
    }
}


const mapStateToProps = (state)=>{
    return {
        // 初始化cartID
        cartID:state.foodStoreReducer.cartID,
        // 注入用户信息
        userInfo:state.loginReducer.userInfo,
        showFood:state.foodStoreReducershowSortFood,
        sortOID:state.foodStoreReducer.SortOID,
        allFood:state.foodStoreReducer.allFood,
        totalPrice:state.foodStoreReducer.beSelectKind.reduce((prev,item)=>{
            return (prev + item.price*item.num)
        },0),
        getData:state.foodStoreReducer.beSelectKind,
        isSelect:state.foodStoreReducer.isSelectFood
    }
}

const mapActionToState = (dispatch)=>{
    return {
        
        selectNow(id,data){    
             
            dispatch({
                type:"selectNow",
                payload:{
                    id,
                    data:data.filter((v)=>v.id===id)
                }
            })
        },
        sendData(data){   
      
            dispatch({
                type:"data",
                payload:data
            })
        },
        changeFoodNum(step,id,num,cartID){

            if(step+num===0){
                axios.post("/user/deleteCart",{
                    cartID:cartID.filter((v)=>v.id===id)[0].cartID,
                }).then((res)=>{
                    dispatch({
                        type:"changeFoodNum",
                        step,
                        id
                    })
                    
                }).catch((err)=>{
                    console.log(err);    
                })
            }else{
                axios.post("/user/modifyCart",{
                    cartID:cartID.filter((v)=>v.id===id)[0].cartID,
                    productnum:num+step
                }).then((res)=>{         
                    dispatch({
                        type:"changeFoodNum",
                        step,
                        id
                    })
            
                }).catch((err)=>{
                    console.log(err);    
                })
            }

           
        },
        sendAllFood(data){
            dispatch({
                type:"sendAllFood",
                payload:data
            })
        },
        showSortFood(showFood){
            dispatch({
                type:"showSortFood",
                payload:[...showFood]
            })
        }
    }
}

export default connect(mapStateToProps,mapActionToState)(FoodList)